<template>
  <div class="productionDesign_box myStyle danji">

    <!-- 新增编辑弹框子组件 -->
    <open-dev-view  :isFullscreen="isFullscreen" :xQurl="xqUrl" :title="targetInfo.name" ref="addOrUpdateRef"></open-dev-view>

    <div class="content_center">
      <StrokeTitle :title="targetInfo.name" class="float margin" style="width: 30.3%" :isCenter="true">

        <!--<img src="../../assets/images/20211026144113.png" alt="" />-->
        <el-image style="width:70%" :src="targetInfo.picUrl" :preview-src-list="[targetInfo.picUrl]">
        </el-image>
        <!-- <img :src="targetInfo.picUrl" style="width:300px" alt="" /> -->
        <!-- <div class="jxb_right flex_center">
          <div class="left">
            <div class="big_cir flex_center">

            </div>
            <div class="and"></div>
            <div class="big_cir flex_center big_cir_blue">
              <div class="small_cir small_cir_blue"></div>
            </div>
          </div>
          <div class="right">
            <div class="item flex_between">
              <div class="title">当前设备运行状态</div>
              <div class="number">维护中</div>
            </div>
            <div class="item item_blue flex_between">
              <div class="title">当日产量</div>
              <div class="number">{{ 22 }}次</div>
            </div>
          </div>
        </div> -->
      </StrokeTitle>
      <StrokeTitle title="设备参数" class="float margin" style="width: 33.3%">
        <!-- <el-button @click="showxq">按钮</el-button> -->
        <div class="btn" @click="showxq">详情</div>
        <div  class="iframe_box" style="width: 100%;height:100%">
          <iframe :src="'http://'+this.FWebViewIP+'/?' + mainUrl" frameborder="0" style="width: 100%;height:100%"></iframe>
        </div>
      </StrokeTitle>
      <StrokeTitle title="设备信息" class="float margin" style="width:33.4%">
        <div class="table_box" ref="table2">
          <el-table :data="top3" :height="height2" border style="width: 100%" :header-cell-style="{ background: '#125496 !important' }">
            <el-table-column prop="value1" align="center" label="铭牌信息">
            </el-table-column>
            <el-table-column prop="value2" align="center" label="铭牌信息值">
            </el-table-column>
          </el-table>
        </div>
      </StrokeTitle>
    </div>
    <div class="content_bottom">
      <StrokeTitle class="float margin" style="width: 99%">
        <div class="iframe_box" style="width: 100%;height:100%">
          <iframe :src="'http://'+this.FWebViewIP+'/?YK_psalarm'" frameborder="0" style="width: 100%;height:100%"></iframe>
        </div>

      </StrokeTitle>
    </div>
  </div>
</template>

<script>
import OpenDevView from "./devXqView";
import TwoRow from "@/components/echarts/bar/twoRow.vue";
import { formatDate } from "@/utils/index";
import { getEquipmentInfo } from "@/api/equipment/jiankong";
export default {
  components: {
    TwoRow,
    OpenDevView,
  },
  data() {
    return {
      xqUrl: "",
      isFullscreen:false,//是否全屏
      mainUrl: "",
      addOrUpdateVisible: false,
      openmdst: false,
      opencpjst: false,
      model: "month",
      timer: null, //定时器
      formatDate: "", //当前时间
      showFlag: "",
      FWebViewIP:null,
      targetInfo: {},
      height1: 100, //设备状态表格高度
      height2: 100, //设备信息表格高度
      height3: 100, //设备信息表格高度
      LogDialogVisible: true,
      btnList: [
        {
          id: 1,
          title: "报警信息",
          img: require("@/assets/images/echarts/baojing.png"),
        },
        {
          id: 2,
          title: "数据统计",
          img: require("@/assets/images/echarts/tongji.png"),
        },
      ],
      btnValue: 1,
      //设备信息
      top3: [],
      bottom: [
      ],
    };
  },

  methods: {
    showxq() {
      //显示组态界面详情
      this.$refs.addOrUpdateRef.showDialog=true

    },
    getEquipmentInfo(id) {
      const targetId = id;
      getEquipmentInfo(targetId).then((response) => {
        //this.bomList = response.rows;
        this.targetInfo = response.data;
        var obj = { value1: "电压(V)", value2: this.targetInfo.voltage };
/*        this.top3.push(obj);
        var obj1 = { value1: "额定电流", value2: this.targetInfo.rated };
        this.top3.push(obj1);*/
        var obj2 = { value1: "设备重量(kg)", value2: this.targetInfo.weight };
        this.top3.push(obj2);
        var obj3 = { value1: "设备尺寸(cm)", value2: this.targetInfo.size };
        this.top3.push(obj3);
        var obj4 = { value1: "装机功率(kw)", value2: this.targetInfo.power };
        this.top3.push(obj4);
        var obj5 = { value1: "出厂编号", value2: this.targetInfo.factoryNum };
        this.top3.push(obj5);
        var obj6 = { value1: "出厂日期", value2: this.targetInfo.factoryDate };
        this.top3.push(obj6);
        var obj7 = { value1: "生产日期", value2: this.targetInfo.makeDate };
        this.top3.push(obj7);
        // console.log(this.top3);
      });
    },

    radioChange() {},
    //表格自适应高度
    getAutoHeight() {
      this.$nextTick(() => {
        clearTimeout(settimeout);
        var settimeout = setTimeout(() => {
          try {
            var table2 = this.$refs.table2.offsetHeight;
            this.height2 = table2 - 40 + "px";
          } catch (e) {
            console.log(e);
          }
        }, 100);
      });
    },
    //表格奇偶数
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "even";
      }
      return "";
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  created() {
    const id = this.$route.query.id;
    this.showFlag = this.$route.query.type;
    this.mainUrl = this.$route.query.mainUrl;
    this.xqUrl = this.$route.query.xqUrl;
    this.isFullscreen = this.$route.query.isFullscreen;
    
    this.getEquipmentInfo(id);
    // console.log(1, formatDate(new Date()));
    this.timer = setInterval(() => {
      this.formatDate = formatDate(new Date());
    }, 1000);
    this.getConfigKey("f.web.view.ip").then(response => {
        this.FWebViewIP = response.msg;
    });
  },
  mounted() {
    //表格自适应高度
    this.getAutoHeight();
    window.onresize = () => {
      this.getAutoHeight();
    };
  },
};
</script>


<style lang="scss" scoped>
.productionDesign_box {
  width: 100%;
  height: 85vh;
  // background: red;
  .content_top,
  .content_bottom,
  .content_center {
    width: 100%;
    height: 44%;
  }
  .content_center {
    margin-bottom: 15px;
    .jxb_right {
      width: 260px;
      height: 150px;
      margin-left: 30px;
      // background: red;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        .big_cir {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #086088;
          .small_cir {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #02d5c2;
          }
        }
        .big_cir_blue {
          border: 1px solid #105b95;
          .small_cir_blue {
            border: 2px solid #1c9ad5;
          }
        }
        .and {
          width: 2px;
          height: 20px;
          margin: 8px 0;
          background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
          background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0%, #02d5c2),
            color-stop(100%, #1c9ad5)
          );
          background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
          background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
          background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
          background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
        }
      }
      .right {
        .item {
          width: 220px;
          height: 52px;
          border: 1px solid #086088;
          margin: 20px 10px;
          padding: 0 20px;
          .title,
          .number {
            font-size: 14px;
            color: #00ebcd;
          }
          .number {
            font-weight: 700;
          }
        }
        .item_blue {
          border: 1px solid #105b95;
          .title,
          .number {
            color: rgba(35, 195, 255, 1);
          }
        }
      }
    }
    @media screen and (max-width: 1200px) {
      .jxb_right {
        width: 300px;
        height: 180px;
        .left {
          .big_cir {
            width: 40px;
            height: 40px;
            .small_cir {
              width: 28px;
              height: 28px;
            }
          }
          .and {
            height: 28px;
          }
        }
        .right {
          .item {
            width: 280px;
            height: 62px;
            border: 1px solid #086088;
            margin: 20px 10px;
            padding: 0 20px;
          }
        }
      }
    }
    .table_box {
      height: 100%;
      width: 100%;
      // background: red;
      padding: 20px;
      .status_box {
        width: 50%;
        height: 32px;
        background: rgba(36, 104, 160, 0.5);
        .lable,
        .status {
          width: 84px;
          height: 32px;
          background: #0163ac;
          border: 1px solid rgba(0, 156, 255, 0.52);
          color: #ffffff;
          text-align: center;
          font-size: 13px;
          line-height: 32px;
          letter-spacing: 1px;
        }
        .status {
          width: 80%;
          color: #3bffe6;
          background: none;
          border: 0px solid rgba(0, 156, 255, 0.52);
        }
      }
      @media screen and (max-width: 1200px) {
        .status_box {
          width: 50%;
          height: 46px;
          .lable,
          .status {
            width: 120px;
            height: 46px;
            background: #0163ac;
            border: 1px solid rgba(0, 156, 255, 0.52);
            color: #ffffff;
            text-align: center;
            font-size: 13px;
            line-height: 46px;
            letter-spacing: 1px;
          }
          .status {
            width: 80%;
            color: #3bffe6;
            background: none;
            border: 0px solid rgba(0, 156, 255, 0.52);
          }
        }
      }
    }
  }
  .content_bottom {
    // height: 46%;
    .table_box {
      height: 100%;
      width: 100%;
      // background: red;
      padding: 20px;
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
  .btn {
    width: 53px;
    height: 22px;
    opacity: 1;
    background: #1cbf24;
    border: 1px solid rgba(0, 156, 255, 0.52);
    color: #d4f0ff;
    font-size: 12px;
    border-radius: 14px;
    text-align: center;
    line-height: 21px;
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 10px;
  }
}
</style>
<style lang="scss">
.danji {
  .el-table .cell {
    height: 34px !important;
    line-height: 34px;
  }
  @media screen and (max-width: 1200px) {
    .el-table .cell {
      height: 46px !important;
      line-height: 46px;
    }
  }
  .el-table--border th,
  .el-table--border td {
    background: none !important;
    border-right: none;
  }
  .el-table .even {
    background: #0d4581 !important;
  }
}
</style>
<style>
.el-image__error{
  background: none;
}
</style>
